<template>
  <div class="home">
    <l-map
      class="map"
      :zoom="zoom"
      :maxZoom="18"
      :minZoom="5"
      :center="center"
      :options="{zoomSnap: 0.2, attributionControl: false, zoomControl: false}" 
      @update:zoom="(zoom) => this.zoom = zoom" 
      @update:center="(center) => this.center = center"
      @click="getLatlng"
    >
      <l-feature-group v-if="flag===0">
        <l-tile-layer :url="url1" :options="options"></l-tile-layer>
        <l-tile-layer :url="url2" :options="options"></l-tile-layer>
      </l-feature-group>
      <l-feature-group v-else>
        <l-tile-layer :url="url3" :options="options"></l-tile-layer>
        <l-tile-layer :url="url4" :options="options"></l-tile-layer>
      </l-feature-group>
      <l-marker v-if="currentLnglat && currentLnglat.lat" :lat-lng="currentLnglat">
        <l-icon :icon-size="[36, 36]">
          <img src="/img/icons/location.png">
        </l-icon>
      </l-marker>
    </l-map>
    <div class="tile-layer-change">
        <RadioGroup v-model="flag">
            <Radio :label="0">地图</Radio>
            <Radio :label="1">地球</Radio>
        </RadioGroup>
    </div>
    <point-view @getLatlng="getLatlng"/>
    <map-info :zoom="zoom" :center="center" :flag.sync="flag" :currentPoint="currentLnglat"/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {LMap, LFeatureGroup, LTileLayer, LMarker, LIcon } from 'vue2-leaflet'
import MapInfo from './MapInfo.vue'
import PointView from './PointView.vue'

const center = {lat: 34.266345, lng: 108.93949}
const builUrl = (type: string) => `http://t{s}.tianditu.com/DataServer?T=${type}&X={x}&Y={y}&L={z}&tk={key}`
const typeArray: string[] = ['vec_w', 'cva_w', 'img_w', 'cia_w']

import config from '@/utils/config'
export default Vue.extend({
  components: {
    LMap, LFeatureGroup, LTileLayer, LMarker, LIcon,
    MapInfo, PointView,
  },
  data() {
    return {  
      flag: 0,
      url1: builUrl(typeArray[0]),
      url2: builUrl(typeArray[1]),
      url3: builUrl(typeArray[2]),
      url4: builUrl(typeArray[3]),
      options: {subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
        key: config.tk,
      },
      zoom: 5,
      center,
      currentLnglat: center,
    }
  },
  methods: {
    // eslint-disable-next-line
    getLatlng(mapObj: any) {
      this.currentLnglat = mapObj.latlng
    },
  },
})
</script>
<style lang="scss" scoped>
.home {
  height: 100vh;
  width: 100%;
}
.map {
  height: 100%; 
  width: 100%;
  position: relative;
}
.tile-layer-change {
  position:absolute;
  top:10px;
  right:10px;
  z-index:699;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #ddd;
}
</style>

